import React from "react";

var CellDay = React.createClass({
	handleSelect: function(){
		// 双休日，前后月份都可选
		// if(this.props.prevmonth == true || this.props.nextmonth == true){
		// 	return;
		// }
		if(this.props.handleSelect != null){
			this.props.handleSelect(this.props.day);
			console.log("choose:", this.props.day);
		}
		else{
			console.warn("需要设置 handleSelect 回调函数");
		}
	},
	render: function(){
		var day = this.props.day;
		var className = "day ";
		if(this.props.active == true){
			className += "active ";
		}
		if(this.props.prevmonth == true){
			className += "old ";
		}
		else if(this.props.nextmonth == true){
			className += 'new ';
		}
		return <td onTouchTap={this.handleSelect} className={className}>{day.getDate()}</td>;
	}	
});

var CVCalendar = React.createClass({
	getInitialState: function(){
		var now = new Date();
		if(this.props.curDate != null){
			now = this.props.curDate;
		}
		return {
      		curMonth: now.getMonth(),
      		curYear: now.getFullYear(),
		};
	},
	propsType: {
		handleSelect: React.PropTypes.any.isRequired,
		curDate: React.PropTypes.any.isRequired
	},
	getDefaultProps: function() {
		var now = new Date();
    	return {
      		curDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
      		type: 'DAY' // DAY / MONTH
    	};
  	},
	getDaysInMonth: function(month, year) {
	    var date = new Date(year, month, 1);
	    var lastDayCurrentMonth = new Date(year, month, 1);
	    lastDayCurrentMonth.setMonth(date.getMonth() + 1);
	    lastDayCurrentMonth.setDate(lastDayCurrentMonth.getDate() - 1)
	    var days = [];
	    var weekdays = [];
	    while (date.getDay() > 0){
	    	date.setDate(date.getDate() - 1);
	    }
	    while (date <= lastDayCurrentMonth) {
	    	if(date.getDay() == 0){
	    		weekdays = [];
	    		days.push(weekdays);
	    	}
	       	weekdays.push(new Date(date));
	       	date.setDate(date.getDate() + 1);
	    }
	    if(date.getDay() != 0){
	    	if(weekdays.length == 7){
	    		weekdays = [];
	    		days.push(weekdays);
	    	}
	    	weekdays.push(new Date(date));
		    while(date.getDay() < 6){
		    	date.setDate(date.getDate() + 1);
		    	weekdays.push(new Date(date));
		    }
		}
	    return days;
	},
	getChineseNum: function(num){
		var chrMap = {
			1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六',
			7: '七', 8: '八', 9: '九', 10: '十', 11: '十一', 12: '十二'
		};		
		return chrMap[num];
	},
	handlePrevMonth: function(){
		var date = new Date(this.state.curYear, this.state.curMonth, 1);
		date.setMonth(this.state.curMonth -1);
		console.log(date)
		this.setState({curMonth: date.getMonth(), curYear: date.getFullYear()});
	},
	handleNextMonth: function(){
		var date = new Date(this.state.curYear, this.state.curMonth, 1);
		date.setMonth(this.state.curMonth +1);
		this.setState({curMonth: date.getMonth(), curYear: date.getFullYear()});
	},
	handleSelectToday: function(){
		// 选择今天
		var today = new Date();
		today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
		this.props.handleSelect(today);
	},
	render: function(){
		var curDate = this.props.curDate;
		var days = this.getDaysInMonth(this.state.curMonth, this.state.curYear);

		// 前进按钮
		var now = new Date();
		var now = new Date(now.getFullYear(), now.getMonth(), now.getDate());
		var next = <i className="icon-arrow-right"></i>;
		if(now.getMonth() == this.state.curMonth && now.getFullYear() == this.state.curYear){
			next = null;
		}

		// 可选项
		var firstDay = new Date(this.state.curYear, this.state.curMonth, 1);
		var lastDay = new Date(this.state.curYear, this.state.curMonth + 1, 0);
		var trIndex = 0, tdIndex = 0;
		var rows = days.map(function(weekdays){
			var tds = weekdays.map(function(day){
				var nextmonth = false, prevmonth = false;
				if(day < firstDay){
					prevmonth = true;
				}
				else if(day >lastDay){
					nextmonth = true;
				}
				if(day.getDay() == 0 || day.getDay() == 6){
					prevmonth = true;
				}
				tdIndex += 1;
				return <CellDay active={curDate.toString() == day.toString()} prevmonth={prevmonth} key={"calendar-td-" + tdIndex}
						nextmonth={nextmonth} day={day} handleSelect={this.props.handleSelect}/>
			}.bind(this))
			trIndex += 1;
			return <tr key={"calendar-tr-" + trIndex}>{tds}</tr>;
		}.bind(this))

		return (
		<div className="datetimepicker">
		<div className="datetimepicker-days" style={{display: 'block', position: 'relative'}}>
			<table className=" table-condensed" style={{width: '100%'}}>
				<thead>
				<tr>
					<th onTouchTap={this.handlePrevMonth} className="prev" style={{width: "14.285714285714285%"}}><i className="icon-arrow-left"></i></th>
					<th colSpan="5" className="switch">{this.getChineseNum(this.state.curMonth + 1)+ "月 "+this.state.curYear+'年'}</th>
					<th onTouchTap={next == null? null: this.handleNextMonth} className="next" style={{width: "14.285714285714285%"}}>{next}</th>
				</tr>
				<tr>
					<th className="dow">日</th>
					<th className="dow">一</th>
					<th className="dow">二</th>
					<th className="dow">三</th>
					<th className="dow">四</th>
					<th className="dow">五</th>
					<th className="dow">六</th>
				</tr>
				</thead>
			<tbody>
				{rows}	
			</tbody>
			<tfoot>
				<tr><th onTouchTap={this.handleSelectToday} colSpan="7" className="today">今日</th></tr>
			</tfoot>
		</table>
	</div>
	</div>
	);
	}
});

var CellMonth = React.createClass({
	handleSelect: function(){
		if(this.props.handleSelect != null){
			var month = new Date(this.props.year, this.props.month, 0);
			this.props.handleSelect(month);
		}
		else{
			console.warn("需要设置 handleSelect 回调函数");
		}
	},
	render: function(){
		return <span onTouchTap={this.handleSelect} className={"month" + this.props.className}>{this.props.month + '月'}</span>
	}	
});

var CVCalendarMonth = React.createClass({
	getInitialState: function(){
		var now = new Date();
		if(this.props.curDate != null){
			now = this.props.curDate;
		}
		return {
      		curYear: now.getFullYear(),
		};
	},
	propsType: {
		handleSelect: React.PropTypes.any.isRequired,
		curDate: React.PropTypes.any.isRequired
	},
	handleNextYear: function(){
		this.setState({curYear: this.state.curYear + 1})
	},
	handlePrevYear: function(){
		this.setState({curYear: this.state.curYear - 1})
	},
	renderMonth: function(){
		var months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
		var months = months.map(function(month){
			var className = '';
			if(month == (this.props.curDate.getMonth() + 1) 
				&& this.props.curDate.getFullYear() == this.state.curYear){
				className = ' active';
			}
			return (<CellMonth key={"month-" + month} year={this.state.curYear} month={month} className={className} 
					handleSelect={this.props.handleSelect}/>);
		}.bind(this));
		return months;
	},
	render: function(){
		var monthRows = this.renderMonth();
		return (
			<div className="datetimepicker datetimepicker-dropdown-bottom-left ">
				<div className="datetimepicker-months" style={{display: "block"}}>
					<table className="table-condensed">
						<thead>
							<tr>
								<th onTouchTap={this.handlePrevYear} className="prev"><i className="icon-arrow-left"></i></th><th colSpan="5" className="switch">{this.state.curYear}</th>
								<th onTouchTap={this.handleNextYear} className="next"><i className="icon-arrow-right"></i></th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td colSpan="7">
									{monthRows}
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		);
	}
})

export { CVCalendar, CVCalendarMonth };